<template lang="html">
  <div id="cartinformation">
    <div v-for='(item,index) in information' class='address'>
    	<div class='address-subject'>
    		<div class='address-top'>
    			<div class='address-top-name'>
	    			{{item.name}}
	    		</div>
    			<div class='address-top-tel'>
					{{item.tel}}
    			</div>
	    	</div>
    		<div class='address-center'>
				<p>{{item.address}}</p>
    		</div>
    		<div class='address-bottom'>
    			<div class='address-bottom-left'>
					<div  @click="AddressHander(item,index)" :class="[item.flag ? xin : yuan]"></div>
					<p class='address-bottom-left-p'>设为默认地址</p>
    			</div>
    			<div class='address-bottom-right'>
					<div class='address-bottom-right-left'>删除</div>
					<div class='address-bottom-right-right'>编辑</div>
    			</div>
    		</div>
    		
    	</div>
    </div>
    <router-link to='/newadderss' tag='div' class='newaddress'>新增地址</router-link>
  </div>
</template>

<script>
export default {
  name:'CartInformation',
  data(){
  	return{
  		yuan:'address-bottom-yuan',
  		xin:'address-bottom-xin'
  	}
  },
  props:{
  	information:{
  		type:Array,
  		default:function(){
  			return []
  		}
  	}
  },
  methods: {
	AddressHander (item, index) {
		if(item.flag){
			item.flag = false
		}else{
			　item.flag = true
		}
　　　　}
　　}
/*  methods:{
    AddressHander:function (item,index) {
        console.log(index)
        console.log(item.flag)
        item.flag = true

    }
  }*/
}
</script>

<style lang="less" scoped>
#cartinformation{
	width: 100%;
	height: 100%;
	.address{
		width: 100%;
		height: 2rem;
		border-bottom:1px solid #43bf92;
		margin:0.2rem 0 ;
		.address-subject{
			width: 95%;
			height: 100%;
			margin:0 2.5%;
			.address-top{
				height: 33%;
				width: 100%;
				line-height:0.7rem;
				.address-top-name{
					width: 20%;
					height: 100%;
					float: left;
				}
				.address-top-tel{
					float: left;
					width: 80%;
					height: 100%;
				}
			}
			.address-center{
				width: 100%;
				height: 33%;
				line-height:0.7rem;
				p{
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
				}
			}
			.address-bottom{
				width: 100%;
				height:33%;
				line-height:0.7rem;
				.address-bottom-left{
					width: 35%;
					height: 100%;
					float: left;
					.address-bottom-left-p{
						font-size:0.2rem;	
					}
					.address-bottom-yuan{
						width: 0.27rem;
						height: 0.27rem;
						border:1px solid #43bf92;
						border-radius:0.3rem;
						margin:0.18rem 0.1rem 0 0 ;
						box-sizing:border-box;
						float: left;
					}
					.address-bottom-xin{
						width: 0.25rem;
						height: 0.25rem;
						background: #43bf92;
						border-radius:0.3rem;
						margin:0.2rem 0.1rem 0 0 ;
						float: left;
					}
				}
				.address-bottom-right{
					width: 20%;
					height: 100%;
					backgrounmd:red;
					float: right;
					.address-bottom-right-left{
						float: left;
					}
					.address-bottom-right-right{
						float: right;
					}
				}
			}
		}
	}
	.newaddress{
		width: 60%;
		height: 0.7rem;
		background-color:#43bf92;
		text-align:center;
		border-radius: 0.7rem;
		line-height:0.7rem;
		margin:0 auto;
		font-size:0.35rem;
		margin-top:0.5rem;
		color:#fff;
	}
}

</style>
<style>
.{
	border-radius: ;
}</style>